@charset "UTF-8";
@import '../mixins/index.scss';
@import '../themes/default.scss';

$componentPrefix: initPrefix();
$component: #{$componentPrefix}grid;

$maxGridCol: 5;

#{$component} {
  @include display();
  @include flex-wrap(wrap);
  /* #ifndef APP-NVUE */
  box-sizing: border-box;
  /* #endif */
  overflow: hidden;
  position: relative;

  // 栅栏Grid
  @for $i from 1 through $maxGridCol {
    // grid-2
    &#{$component}__col-#{$i} > view {
      width: 100% / $i;
      /* #ifndef APP-NVUE */
      box-sizing: border-box;
      /* #endif */
    }
  }

  $gridSquareName: #{$component}--square;
  $gridColName: #{$component}__col-;

  %overflowHidden {
    overflow: hidden;
  }

  &[class*='spacing-0']#{$gridSquareName} > view {
    margin-right: 0 !important;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
  }

  $gridPaddings:
    ('xs', $ft-spacing-h-xs), ('sm', $ft-spacing-h-sm), ('md', $ft-spacing-h-md), ('lg', $ft-spacing-h-lg),
    ('xl', $ft-spacing-h-xl);
  @for $i from 1 through $maxGridCol {
    // .ft-grid.ft-grid__col-i.ft-grid--square
    @each $name, $value in $gridPaddings {
      // 这个是为了让编辑器有提示
      &__spacing-#{$name} {
        @extend %overflowHidden;
      }
      &[class*='spacing-#{$name}']#{$gridColName}#{$i} > view,
      &[class*='spacing-#{$name}']#{$gridColName}#{$i}#{$gridSquareName} > view {
        margin-right: $value;
        margin-bottom: $value;
        position: relative;
        overflow: hidden;
      }
    }
  }

  // .ft-grid.ft-grid__col-1.ft-grid--square
  &#{$component}__col-1#{&}--square > view {
    padding-bottom: 100%;
    height: 0;
    margin-right: 0;
  }

  @for $i from 2 through $maxGridCol {
    $gridPaddings:
      ('xs', $ft-spacing-h-xs), ('sm', $ft-spacing-h-sm), ('md', $ft-spacing-h-md), ('lg', $ft-spacing-h-lg),
      ('xl', $ft-spacing-h-xl);

    // 如果不要spacing
    &#{$component}__col-#{$i}#{&}--square > view {
      position: relative;
      padding-bottom: calc(100% / #{$i});
      height: 0;
      width: calc(100% / #{$i});
    }
    // 是否需要线条
    &--line {
      // 添加上线条
      @include border-thin-top();

      &#{$component}__col-#{$i}#{$component}--square > view {
        @include border-thin-right();
        @include border-thin-bottom();

        &:nth-child(#{$i}n) {
          border-right: none;
        }
      }
    }

    // .ft-grid.ft-grid__col-i.ft-grid--square
    // 正方形Grid 计算样式
    @each $name, $value in $gridPaddings {
      &[class*='spacing-#{$name}']#{$gridColName}#{$i}#{$gridSquareName} > view {
        $gridSquarePaddingBottom: $value * ($i - 1);
        padding-bottom: calc((100% - #{$gridSquarePaddingBottom}) / #{$i}) !important;
        height: 0;
        width: calc((100% - #{$gridSquarePaddingBottom}) / #{$i}) !important;
      }
    }
  }

  // 正方形 grid 内置元素 样式定义
  &#{$gridSquareName} {
    overflow: hidden;

    & > view#{$componentPrefix}bg-img > image {
      width: 100% !important;
      height: 100% !important;
      position: absolute;
      overflow: hidden;
      font-size: 0;
    }

    #{$componentPrefix}tag {
      position: absolute;
      right: 0;
      top: 0;
    }

    & > view > text[class*='#{$ft-icon-css-prefix}'] {
      font-size: $ft-font-size-sl;
      position: absolute;
      color: $ft-color-grey;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      @include flex-center();
    }
  }

  %marginRight0 {
    margin-right: 0;
  }

  @for $i from 1 through $maxGridCol {
    &#{$gridColName}#{$i}#{$component}--square > view:nth-child(#{$i}n) {
      @extend %marginRight0;
    }
  }
}
